import React, { useState } from 'react';
import { Outlet,useNavigate } from "react-router-dom"

import { Breadcrumb, Layout, Menu, theme,Button } from 'antd';
import logo from "../../assets/images/logo-500px.png"
import MyMenu from '../../components/MyMenu';
// import items from "../../config/menuConfig"
const { Header, Content, Footer, Sider } = Layout;
// import MyMenu from '../../components/MyMenu';



/**
 * 菜单需要的一些内容
 * @param {} label 
 * @param {*} key 
 * @param {*} icon 
 * @param {*} children 
 * @returns 
 */
// function getItem(label, key, icon, children) {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   };
// }
// const items = [
//   getItem('主页', '1', <PieChartOutlined />),
//   getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, 
//     [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];

const Home = () => {
  //这个代表组件内部状态
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const logout = ()=>{
    localStorage.removeItem("token")
    localStorage.removeItem("userInfo")
    navigate("/")
    // window.location.href="/"
  }
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      {/* Silder代表侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical">
          <img width="180px" src={logo} alt="" />
        </div>
        {/* 侧边栏存放菜单 */}
        {/* <Menu
          theme="dark"
          defaultSelectedKeys={['/home/main']}
          defaultOpenKeys={["/home/product", "/home/charts"]}
          mode="inline"
          items={items}
        /> */}
        <MyMenu></MyMenu>
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button onClick={logout}>注销</Button>
        </Header>
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
            <Breadcrumb.Item>Bill2</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2023 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default Home;